<template>
  <view class="tn-margin-top">  
    <block v-for="(item, index) in list" :key="index">
      <view class="list__item list__project" @click="goto('/pages/project/view', item.id)">
        <view>
          <image class="list__image list__image--0 tn-margin-bottom-xs" :src="item.picture" lazy-load :lazy-load-margin="0.5" mode="aspectFill"></image>
        </view>
        <view class="list__label tn-text-justify tn-margin-left-xs tn-margin-right-xs">
          <text class="list__label__desc tn-text-md tn-text-bold tn-color-cat">{{ item.title || '' }}</text>  
        </view>
        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs tn-margin-left-xs tn-margin-right-xs">
          <view v-if="item.category" class="justify-content-item tn-text-center">
            <view class="list__label__item tn-float-left">
              <text class="list__label__item--prefix">#</text> {{ item.category.title || '' }}
            </view>
          </view>
          <view class="justify-content-item tn-flex tn-flex-col-center">
            <view class="tn-color-gray tn-text-sm">
              <text class="tn-icon-share-square tn-padding-right-xs"></text>
              <text class="tn-padding-right">{{ item.share_total }}</text>
              <text class="tn-icon-star tn-padding-right-xs"></text>
              <text class="tn-padding-right">{{ item.collection_total }}</text>
              <text class="tn-icon-praise tn-padding-right-xs"></text>
              <text class="">{{ item.approval_total }}</text>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js'
  import request from '@/common/request.js';
  
  export default {
    name: 'CxProjectHot',
    mixins: [base],
    data(){
      return {
        model: 'business/project',
        list: []
      }
    },
    created() {
      this.getHotData();
    }
  }
</script>

<style lang="scss" scoped>
	@import '@/static/scss/common.scss';
</style>